<template>
  <div id="addRole">
    <h3>添加用户</h3>
    <!-- 角色信息 -->
    <Form :model="userInfo" :rules="registerRule" ref="addForm">
        <FormItem prop="username" label="用户名">
            <Input v-model="userInfo.username"></Input>
        </FormItem>
        <FormItem prop="password" label="密码">
            <Input v-model="userInfo.password"></Input>
        </FormItem>
        <FormItem prop="nickName" label="用户昵称">
            <Input v-model="userInfo.nickName"></Input>
        </FormItem>
        <FormItem prop="phone" label="电话">
            <Input v-model="userInfo.phone"></Input>
        </FormItem>
        <FormItem prop="email" label="邮箱">
            <Input v-model="userInfo.email"></Input>
        </FormItem>
        <!-- <FormItem>
          角色权限选择
          <Checkbox-group v-model="userInfo.roles">
              <Checkbox :label="item.id" v-for="item in roles" :key="item.id">{{item.rolename}}</Checkbox>
          </Checkbox-group>
        </FormItem> -->
    </Form>

    <Button type="primary" @click="saveUser()">添加</Button>
  </div>
</template>

<script>

export default {
  data(){
    return{
      userInfo:{
        username:'',
        password:'',
        nickName:'',
        phone:'',
        email:'',
        // roles:[]
      }, //角色的基本信息
      // roles:[], //角色的权限
      registerRule:{
        username:[
          { required: true, message: 'Please fill in the user name', trigger: 'blur' }
        ],
        password:[
          { required: true, message: 'Please fill in the user name', trigger: 'blur' },
          { type: 'string', min: 6, message: 'The password length cannot be less than 6 bits', trigger: 'blur' }
        ],
        nickName:[
          { required: true, message: 'Please fill in the user name', trigger: 'blur' }
        ],
        phone:[
          { required: true, message: 'Please fill in the user name', trigger: 'blur' },
          {
              validator: (rule, value, callback)=>{
                // myphone为你要验证的邮箱
                function checkPhone(myphone) {　　
                    var myReg = /^1(3|4|5|6|7|8|9)\d{9}$/;
                    if (myReg.test(myphone)) {　　　　
                        return true;　　
                    } else {　　　　
                        return false;
                    }
                }
                  if(checkPhone(value)){
                      callback()
                  }else{
                      callback(new Error('手机号码格式不正确'))
                  }                  
              }, trigger: 'blur'
          }
        ],
        email:[
          { required: true, message: 'Please fill in the user name', trigger: 'blur' },
          {
              validator: (rule, value, callback)=>{
                // myemail为你要验证的邮箱
                function checkEmail(myemail) {　　
                    var myReg = /^[a-zA-Z0-9_-]+@([a-zA-Z0-9]+\.)+(com|cn|net|org)$/;
                    if (myReg.test(myemail)) {　　　　
                        return true;　　
                    } else {　　　　
                        return false;
                    }
                }
                if(checkEmail(value)){
                    callback()
                }else{
                    callback(new Error('邮箱格式不正确'))
                }                  
              }, trigger: 'blur'
          }
        ]
      }
    }
  },
  created(){
    // this.getRoles()
  },
  methods:{
    // async getRoles(){
    //   const {data:res} = await this.$axios.get('/role/list')
    //   // console.log(res)
    //   this.roles = res.page.list
    // },
    //保存角色设置
    async saveUser(){
      this.$refs.addForm.validate(async (valid) => {
        if(valid){
          const {data:res} = await this.$axios.post('/user/add', this.userInfo)
          if(res.status == 200){
            this.$Message.info('添加成功');
            this.$router.push('/admin/user')
          }else{
            this.$Message.info('添加失败');
          }
        }
      })      
    }
  }
}
</script>

<style>
  #addRole{
    margin:0 2vw;
  }
  h3{
    margin:1vh 0;
  }
  .node{
    margin-bottom:12px;
  }
  .children{
    margin-left:18px;
  }
</style>